<template>

  <div class="hello">
    <el-container>

      <!--      顶栏容器-->
      <el-header>
        <div class="header">
          <el-row>

            <el-col :span="20">
              <div class="grid-content-left bg-purple-dark">
                <i class="el-icon-arrow-right"></i>
                <span style="font-size: 18px;margin-left:25px">我的考试</span>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content-right bg-purple-dark">
                <div class="login"><span class="text1"><router-link to="/">主页</router-link></span></div>
<!--                <div class="login"><span class="text1">标签1</span></div>-->
                <el-dropdown>
                  <div class="login">
                    <el-avatar :size="avatarSize">{{ userData.userName }}</el-avatar>
                  </div>
                  <el-dropdown-menu style="width: 150px;" slot="dropdown">

                    <div @click="showUserInfo()">
                      <el-dropdown-item class="hoverMenu hoverMenuBlock"><i class="el-icon-user-solid"></i><span
                          class="hoverMenuText">简介</span>
                      </el-dropdown-item>
                    </div>


                    <!--                    <el-dropdown-item class="hoverMenu hoverMenuBlock"><i class="el-icon-s-operation "></i><span-->
                    <!--                        class="hoverMenuText">设置</span></el-dropdown-item>-->
                    <div @click="loginOut()">
                      <el-dropdown-item class="hoverMenu hoverMenuBlock"><i class="el-icon-switch-button "></i><span
                          class="hoverMenuText">注销</span></el-dropdown-item>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <!--        侧边栏-->
      <el-container>
        <el-aside style="width:200px;height: 829px;">

          <el-menu default-active="1" router>

            <!--            主页-->
            <el-menu-item index="/work/home" v-if="userData.role==1">
              <div class="asideBlock">
                <div style="display: inline-block;width: 65px">
                  <i style="margin-bottom: 2px" class="el-icon-s-home"></i>
                </div>
                <div style="display: inline-block;">
                  <span slot="title" class="asideText">主页</span>
                </div>
              </div>
            </el-menu-item>

            <!--考试            总栏 老师学生都可见 其分栏分别可见-->
            <el-submenu index="1">
              <template slot="title">
                <div class="asideBlock">
                  <div style="display: inline-block;width: 65px">
                    <i style="margin-bottom: 2px" class="el-icon-document"></i>
                  </div>
                  <div style="display: inline-block;">
                    <span slot="title" class="asideText">考试</span>
                  </div>
                </div>
              </template>
              <el-menu-item-group>
                <!--学生可见列表-->
                <div v-if="userData.role==2">
                  <el-menu-item index="/work/examListStu">考试列表</el-menu-item>
                  <el-menu-item index="/work/answerListStu">答卷列表</el-menu-item>
                </div>

                <!--老师可见列表-->
                <div v-if="userData.role==1">
                  <el-menu-item index="/work/mangeClass">班级列表</el-menu-item>
                  <el-menu-item index="/work/examList">测试列表</el-menu-item>
                  <!--                  <el-menu-item  index="/work/correctAnswerPaperList">批改答卷</el-menu-item>-->
                </div>
              </el-menu-item-group>
            </el-submenu>


            <!-- 题库           仅老师可见-->
            <el-submenu v-if="userData.role==1" index="2">
              <template slot="title">
                <div class="asideBlock">
                  <div style="display: inline-block;width: 65px">
                    <i style="margin-bottom: 2px" class="el-icon-folder-opened"></i>
                  </div>

                  <div style="display: inline-block;">
                    <span slot="title" class="asideText">题库</span>
                  </div>
                </div>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/work/paper">试卷列表</el-menu-item>
                <el-menu-item index="/work/paperMaker">试卷创编</el-menu-item>
                <el-menu-item index="/work/questionMaker">试题创编</el-menu-item>
                <el-menu-item index="/work/bankQuestionList">试题仓库</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu v-if="userData.role==1" index="3">
              <template slot="title">
                <div class="asideBlock">
                  <div style="display: inline-block;width: 65px">
                    <i style="margin-bottom: 2px" class="el-icon-s-data"></i>
                  </div>
                  <div style="display: inline-block;">
                    <span slot="title" class="asideText">统计</span>
                  </div>
                </div>
              </template>
              <el-menu-item-group>

                <el-menu-item index="/work/examStatistics">测试统计</el-menu-item>

              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </el-aside>
        <!--        主区域内容-->
        <el-main>
          <div class="main">
            <router-view></router-view>
          </div>
        </el-main>

        <!--      信息隐藏框-->
        <el-dialog
            title="个人简介"
            :visible.sync="userInfoVisible"
            width="30%"

        >

          <div class="avatarMenu">
            <el-avatar style="font-size: 24px!important;" :size="85">{{ userData.userName }}</el-avatar>
<!--            <span style="margin-top: 8px">{{ userData.year }}级 {{ userData.majorName }} {{ userData.classNum }}班</span>-->
          </div>

          <div v-if="userData.role==2" class="userInfoMenu">
            <div class="info">
              <span class="label">年级: </span><span class="text">{{userData.year}} 级</span>
            </div>
            <div class="info">
              <span class="label">专业: </span><span class="text">{{userData.majorName}} </span>
            </div>
            <div class="info">
              <span class="label">班级: </span><span class="text">{{userData.classNum}} 班</span>
            </div>
            <div class="info">
              <span class="label">学历: </span><span class="text">{{userData.school.level}} </span>
            </div>
            <div class="info">
              <span class="label">邮箱: </span><span class="text">{{userData.email}} </span>
            </div>
            <div class="info">
              <span class="label">学校: </span><span class="text">{{userData.school.schoolName}}  ({{userData.school.department}})</span>
            </div>
            <div class="info">
              <span class="label">城市: </span><span class="text">{{userData.school.cityName}} </span>
            </div>


          </div>

          <div v-else-if="userData.role==1" class="userInfoMenu">
            <div class="info">
              <span class="label">邮箱: </span><span class="text">{{userData.email}} </span>
            </div>
            <div class="info">
              <span class="label">手机号: </span><span class="text">{{userData.phone}} </span>
            </div>

          </div>

          <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userInfoVisible = false">确 定</el-button>
          </span>
        </el-dialog>

      </el-container>


    </el-container>
  </div>
</template>
<script>


import {Storage} from '@/utils/localStorage'
import {eventBus} from "@/main";

const storage = new Storage();

//创建一个事件总线对象 用于更新当前路由


export default {
  name: "WorkView",
  data() {
    return {
      avatarSize: 45,
      avatarSizeForMenu: 45,
      // circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      userData: [],
      currentRouter: '/work/home',
      userInfoVisible: false
    }
  },
  methods: {
    showUserInfo() {
      this.userInfoVisible = true;

    },
    //被created()自动调用
    onLoad() {
      //用于头像显示
      this.userData = storage.getItem("user");
      // console.info("this.userData",this.userData)

    },
    loginOut() {
      localStorage.removeItem("user");
      this.$router.push('/');
    },
  },
  created() {
    this.onLoad()
    this.currentRouter = this.$router.currentRoute.path;
    //响应notification.js中的跳转更新路由
    // eventBus.$on('currentRouterUpdate', (data) => {
    //   this.currentRouter = data
    // })
  },
  //事件需要手动销毁
  // destroyed() {
  //   eventBus.$off('currentRouterUpdate');
  // }
}
</script>

<style scoped>

.router-link-active {
  text-decoration: none;
  color: #000000;
}



a {
  text-decoration: none;
}

/*如题*/
.asideBlock {
  display: flex;
  justify-content: start;
}

.asideText {
  margin-right: 10px;
  font-size: 16px;
  margin-top: 30px !important;

}

/*强制覆盖hoverMenu列表项的宽度*/
.hoverMenuBlock {
  height: 40px ! important;
}

/*hoverMenu列表项文字的大小和居中*/
.hoverMenuText {
  font-size: 15px;
  margin-bottom: 1px;
  margin-left: 5px;
}

/*使列表项按钮文字居中*/
.hoverMenu {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*自定义图标的大小*/
/*hoverMenu*/
.el-icon-s-operation {
  font-size: 19px;
}

/*hoverMenu*/
.el-icon-switch-button {
  font-size: 19px;
}

/*列表图标的大小*/
.el-icon-document,
.el-icon-folder-opened,
.el-icon-s-home,
.el-icon-s-data {
  font-size: 23px !important;
}


.el-icon-arrow-right {
  font-size: 25px;
}

.el-icon-user-solid {
  font-size: 21px;
}


.el-aside {
  color: #333;
}


.router-link {
  text-decoration: none;
}

.text1 {
  color: black !important;
}

.text1:hover {
  color: #409EFF;
}

.textReg {
  color: #fff;
}

.userInfoMenu {
  margin-top: 30px;
  height: 100%;
  width: 100%;
}

.userInfoMenu .info {
  display: flex;
  margin-left: 40px;
  margin-right: 40px;
  height: 40px;
}

.userInfoMenu .info .text {
  font-size: 16px;
  align-items: center;
  display: flex;
  width: 80%;
  padding-left: 10px;
}

.userInfoMenu .info .label {
  justify-content: end;
  font-size: 16px;
  display: flex;
  align-items: center;
  width: 20%;
}

.avatarMenu {

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 140px !important;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #F2F2F2;
  border-top: 1px solid #F2F2F2;
  /*border-radius: 4px;*/
  cursor: pointer
}

.login {
  display: flex;
  width: 70px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}

.register:hover {
  background-color: #6595e5;
}

/*注册bq块*/
.register {
  display: flex;
  background-color: #0052d9;
  width: 100px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}


/*总合盒子高度*/
.hello {
  height: 98vh;
}

/*盒子下的header高度*/
.hello .header {
  height: 140px;
}

.hello .main {
  text-align: center;
  height: 829px;
}

/*layout分栏默认颜色*/
/* .bg-purple-dark {
  background: #99a9bf;
} */

/*layout左导航分栏*/
.grid-content-left {
  /*border-radius: 4px;*/
  min-height: 60px;
  display: flex;
  text-align: left;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid #e6e6e6;

}

/*layout右登录注册分栏*/
.grid-content-right {
  /*border-radius: 4px;*/
  min-height: 60px;
  display: flex;
  justify-content: end;
  border-bottom: 1px solid #e6e6e6;
}

</style>